<style>
.device {
  padding: 10px;
  min-height: 600px;
}
</style>

<template>

  <div class="device">
    <div style="background-color:#B0E0E6;padding:10px 0 0;border-radius:4px;position:relative;">
      <Row>
        <Col span="24">
        <Button @click="toExcel" type="ghost" style="background-color:#fff" class="top-btn" size="large" icon="archive" v-has="'excel_export'">导出
        </Button>
        <Button @click="importDevice" type="warning" class="top-btn" size="large" icon="ios-cloud-upload-outline" v-has="'excel_import'">导入烟感设备
        </Button>
        <!--<Button class="top-right-btn" size="large" icon="plus" @click="addItem" v-has="'add'">添加</Button>-->
        <Poptip width="400" title='搜索' placement="bottom-end" class="top-btn">
          <Button type="primary" size="large" icon="ios-search">搜 索</Button>
          <div style="text-align:center" slot="content">
            <Form ref="searchForm" :model="searchForm" :label-width="80" value=true style="min-width:200px;padding-top:20px;border-top:1px solid #a3adba;border-bottom:1px solid #a3adba;">
              <Row>
                <Form-item label="设备名称">
                  <Input v-model="searchForm.devName"></Input>
                </Form-item>
              </Row>
              <Row>
                <Form-item label="联网单位">
                  <Cascader :data="areasBuildingsCascader" v-model="searchForm.areaGcbd" :filterable="true" transfer></Cascader>
                </Form-item>
              </Row>
            </Form>
            <Row>
              <Button style="margin-left:5px;margin-top:10px;float:right;background-color: #5bc0de;color:#fff" size="small" @click="doSearchTableList">确定</Button>
              <Button style="float:right;margin-top:10px;" size="small" @click="resetSearch">重置</Button>
            </Row>
          </div>
        </Poptip>
        </Col>
      </Row>
    </div>
    <!--table-->
    <Row>
      <Table stripe size="small" :height="tableHeight" :loading="tableLoading" :columns="tableColums" :data="tableData"></Table>
    </Row>
    <Row>
      <Page :total="total" :page-size="currentPageSize" :current="currentPage" @on-change="changeCurrentPage" @on-page-size-change="changePageSize" show-total show-sizer style="float:right;margin-top:10px"></Page>
    </Row>
    <!--新增编辑-->
    <deviceForm :modalShow="formShow" :modalFormTitle="formTitle" :parentForm="parentForm" @listenModalForm="hideModel" @refreshTableList="getTableList"></deviceForm>
    <!--导入-->
    <deviceImport :modalShow="importFormShow" @listenModalForm="hideImportModel" @refreshTableList="getTableList"></deviceImport>
    <!--是否删除框-->
    <Modal v-model="delModal" width="360">
      <p slot="header" style="color:#f60;text-align:center">
        <Icon type="information-circled"></Icon>
        <span>删除确认</span>
      </p>
      <div style="text-align:center">
        <p>是否继续删除？</p>
      </div>
      <div slot="footer">
        <Button type="error" size="large" long :loading="btnLoading" @click="comfirmDel">删除</Button>
      </div>
    </Modal>
    <Modal title="安装照片" v-model="visible">
      <img :src="devImage" v-if="visible" style="width: 100%">
      <div slot="footer">
      </div>
    </Modal>
  </div>

</template>

<script>
import {
  getDevicePagedList,
  delDevice,
  getDeviceListExcel,
  areasBuildingsCascader
} from "../../../api/getData";
import { clearObj } from "../../../libs/util";
import deviceForm from "./deviceForm.vue";
import deviceImport from "./deviceImport.vue";
import expandRow from "./table-expand.vue";
import { baseUrl } from "./../../../api/env";
export default {
  name: "Res_Operator",
  components: {
    deviceForm,
    deviceImport
  },
  data() {
    return {
      tableLoading: false,
      tableColums: [
        {
          type: "index",
          minWidth: 60,
          title: "序号",
          align: "center"
        },
        {
          align: "center",
          minWidth: 140,
          title: "设备名称",
          key: "devName"
        },
        {
          align: "center",
          minWidth: 120,
          title: "设备型号",
          key: "devModel"
        },
        {
          align: "center",
          minWidth: 140,
          title: "IMEI",
          key: "imei"
        },
        {
          align: "center",
          minWidth: 100,
          title: "iccid",
          key: "iccid"
        },
        {
          align: "center",
          title: "状态",
           minWidth: 140,
          key: "devStatus",
          render: (h, params) => {
            if(params.row.devStatus==1){
                return h('span', {
                                style: {
                                    color: '#5cb85c'
                                }
                            }, "在线");
            }else{
              return h('span', {
                                style: {
                                    color: '#f54d50'
                                }
                            }, "离线");
            }
          }
        },
        {
          align: "center",
          minWidth: 100,
          title: "运营商",
          key: "operator"
        },
        {
          align: "center",
          minWidth: 100,
          title: "安装时间",
          key: "installDate"
        },
         {
          align: "center",
          minWidth: 140,
          title: "安装地址",
          key: "bdAddr"
        },
        {
          align: "center",
          minWidth: 140,
          title: "详细地址",
          key: "installAddr"
        },  
         {
          align: "center",
          minWidth: 100,
          title: "联网单位",
          key: "groupName"
        },
       {
          align: "center",
          minWidth: 100,
          title: "子单位",
          key: "bdName"
        },
        {
          align: "center",
          minWidth: 100,
          title: "所属客户",
          key: "managerName"
        },
        {
          align: "center",
          minWidth: 120,
          title: "客户手机",
          key: "managerMobile"
        },
        {
          align: "center",
          title: "安装图",
          minWidth: 60,
          key: "Pic1",
          render: (h, params) => {
            let imgSrc = params.row.Pic1;
            if (imgSrc) {
              imgSrc = baseUrl + imgSrc;
              return h("img", {
                attrs: {
                  src: imgSrc
                },
                on: {
                  click: () => {
                    this.handleView(imgSrc);
                  }
                },
                style: {
                  width: "20px",
                  height: "20px"
                }
              });
            }
          }
        },
        {
          title: "操作",
          minWidth: 140,
          align: "center",
          render: (h, params) => {
            let actions = [];
            if (this.$route.meta.actions.find(i => i === "edit")) {
              actions.push(
                h(
                  "Button",
                  {
                    props: {
                      type: "warning",
                      size: "small"
                    },
                    style: {
                      marginRight: "5px"
                    },
                    on: {
                      click: () => {
                        this.editItem(params.row);
                      }
                    }
                  },
                  "修改"
                )
              );
            }

            if (this.$route.meta.actions.find(i => i === "del")) {
              actions.push(
                h(
                  "Button",
                  {
                    props: {
                      type: "error",
                      size: "small"
                    },
                    style: {
                      marginRight: "5px"
                    },
                    on: {
                      click: () => {
                        this.delItem(params.row.id);
                      }
                    }
                  },
                  "删除"
                )
              );
            }

            return h("div", actions);
          }
        }
      ],
      tableData: [],
      tableHeight: window.innerHeight - 300,
      total: 0,
      currentPage: 1,
      currentPageSize: 20,
      formShow: false,
      formTitle: "添加设备",
      parentForm: {
        id: "",
        departmentId: "",
        devId: "",
        devName: "",
        devModel: "",
        dutyImage: "",
        friendName: "",
        imei: "",
        iccid: "",
        installDate: "",
        installAddr: "",
        remark: "",
        smkBuildingId: 0
      },
      delModal: false,
      delId: "", //删除的Id
      btnLoading: false,
      searchForm: {
        areaGcbd: [],
        devName: "",
        gc_id: 0,
        dep_id: 0,
        rows: 20,
        page: 0
      },
      importFormShow: false,
      visible: false,
      devImage: "",
      areasBuildingsCascader: []
    };
  },
  computed: {},
  created() {},
  mounted() {
    this.getTableList();
    this.getAreasBuildingsCascader();
    const vm = this;
    window.onresize = () => {
      return (() => {
        vm.tableHeight = window.innerHeight - 300;
      })();
    };
  },
  methods: {
    async getAreasBuildingsCascader() {
      let res = await areasBuildingsCascader({ allData: false });
      if (res.code == 0) {
        this.areasBuildingsCascader = res.data;
      }
    },
    resetSearch() {
      this.searchForm.devName = "";
      this.searchForm.areaGcbd = [];
    },
    doSearchTableList() {
      this.currentPage = 1;
      this.getTableList();
    },
    async getTableList() {
      this.tableLoading = true;
      this.searchForm.page = this.currentPage - 1;
      this.searchForm.rows = this.currentPageSize;
      if (this.searchForm.areaGcbd.length == 0) {
        this.searchForm.dep_id = 0;
        this.searchForm.gc_id = 0;
      } else if (this.searchForm.areaGcbd.length == 1) {
        this.searchForm.dep_id = this.searchForm.areaGcbd[0];
        this.searchForm.gc_id = 0;
      } else if (this.searchForm.areaGcbd.length == 2) {
        this.searchForm.dep_id = this.searchForm.areaGcbd[0];
        this.searchForm.gc_id = this.searchForm.areaGcbd[1];
      }
      const params = this.searchForm;
      const result = await getDevicePagedList(params);
      if (result.code == 0) {
        let res = result.data;
        this.total = res.total;
        this.tableData = res.data;
      } else {
        this.$Message.error(result.msg);
      }
      this.tableLoading = false;
    },
    changeCurrentPage(num) {
      this.currentPage = num;
      this.getTableList();
    },
    changePageSize(pageSize) {
      this.currentPageSize = pageSize;
      this.getTableList();
    },
    editItem(row) {
      this.parentForm = JSON.parse(JSON.stringify(row));
      this.formTitle = "修改设备";
      this.formShow = true;
    },
    delItem(Id) {
      this.delId = Id;
      this.delModal = true;
    },
    async comfirmDel() {
      this.btnLoading = true;
      try {
        const res = await delDevice({ id: this.delId });
        if (res.code=="0") {
          this.$Message.success("删除成功!");
          this.getTableList();
          this.delModal = false;
        } else {
          this.$Message.error(res.msg);
        }
      } catch (err) {
        console.log(err);
        this.$Message.error("服务器异常，稍后再试");
      }
      this.btnLoading = false;
    },
    hideModel() {
      this.formShow = false;
    },
    importDevice() {
      this.importFormShow = true;
    },
    hideImportModel() {
      this.importFormShow = false;
    },
    async toExcel() {
      const params = this.searchForm;
      const res = await getDeviceListExcel(params);
      console.log(res);
      if (res.code == 0) {
        const url = baseUrl + res.data;
        window.open(url);
      } else {
        this.$Message.error(res.mag);
      }
    },
    handleView(img) {
      this.devImage = img;
      this.visible = true;
    }
  }
};
</script>
